    <!-- <div class="layuimini-container">
    <div class="layuimini-main">
        <table id="currentTable" class="layui-table layui-hide"
               data-auth-add="{:auth('distributor.distributor/add')}"
               data-auth-edit="{:auth('distributor.distributor/edit')}"
               data-auth-delete="{:auth('distributor.distributor/delete')}"
               lay-filter="currentTable">
        </table>
    </div>
</div> -->
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="app">
            <template>
                <el-table
                        :data="currentTable"

                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="ID"
                            align="center"
                            >
                    </el-table-column>
                    <el-table-column label="姓名" align="center" prop="name" align="center"></el-table-column>
                    <el-table-column label="昵称" align="center" prop="nickname"></el-table-column>
                    <el-table-column label="手机号" align="center" prop="phone"></el-table-column>
                    <el-table-column
                            prop="age"
                            label="年龄"
                            align="center"
                            >
                    </el-table-column>
                    <el-table-column label="头像" align="center">
                        <template slot-scope="{row}">
                            <el-avatar shape="square" size="medium" :src="row.avatar"></el-avatar>
                        </template>
                    </el-table-column>

                    <el-table-column label="推广人数" align="center" prop="promotion_number"></el-table-column>
                    <el-table-column label="身份证" align="center" prop="card" width="180"></el-table-column>
                    <el-table-column label="可提现佣金" align="center" prop="commission"></el-table-column>
                    <el-table-column label="已提现佣金" align="center" prop="endmoney"></el-table-column>
                    <el-table-column label="已提现佣金" align="center" prop="endmoney"></el-table-column>
                    <el-table-column label="分销商等级" align="center" prop="dis_level">
                        <template slot-scope="{row}">
                           <div v-if="!row.show" @click="level_click(row)">
                               <div v-if="row.dis_level==1">等级一</div>
                               <div v-else-if="row.dis_level==2">等级二</div>
                               <div v-else-if="row.dis_level==3">等级三</div>
                               <div v-else-if="row.dis_level==4">等级四</div>
                               <div v-else-if="row.dis_level==5">等级五</div>
                           </div>
                            <div v-else>
                                <el-input v-model="row.dis_level" type="number" :autofocus="true" max="5"  @blur="blur_level(row)" placeholder="请输入等级"></el-input>
                            </div>
                        </template>

                    </el-table-column>
                    <el-table-column label="分销商禁用" align="center">
                        <template slot-scope="{row}">
                            <el-switch
                                    v-model="row.status"
                                    active-value="1"
                                    inactive-value="0"
                                    @change="handleSwitch(row)"
                                   >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="注册时间" align="center" prop="create_time"></el-table-column>
                    <el-table-column label="审核状态" align="center">
                        <template  slot-scope="{row}">
                            <div v-if="row.examine==1">已审核</div>
                            <div v-else-if="row.examine==0">待审核</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="{row}">
                            <div v-if="row.examine==1">
                                <el-button type="primary" size="mini" plain @click="edit(row)">编辑</el-button>
                                <el-button size="mini" @click="look_b_user(row.id)">查看下级成员</el-button>
                            </div>
                            <div v-else-if="row.examine==0">
                                <el-button type="primary" size="mini" @click="handlePrimary(row)">通过</el-button>
                                <el-button type="danger" size="mini" @click="handleDangerF(row)">拒绝</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="currentTable.length">
                </el-pagination>

                <el-dialog
                        title="编辑"
                        :visible.sync="centerDialogVisible"
                        width="600px"
                        center>
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" minlength="1"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="form.phone" minlength="1"></el-input>
                        </el-form-item>
                        <el-form-item label="年龄" >
                            <el-input v-model="form.age" minlength="1"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="card">
                            <el-input v-model="form.card" minlength="1"></el-input>
                        </el-form-item>
                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                        <el-button type="primary"  type="primary" @click="handle_edit_info">确 定</el-button>
                    </el-form>

                  </span>
                </el-dialog>
                <el-dialog
                        title="下级成员"
                        :visible.sync="Visible"
                        width="1100px"
                        >
                    <el-form ref="form" :model="form" label-width="80px" :inline="true"  class="demo-form-inline">
                        <el-form-item label="活动名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="活动名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
<!--                    <span>这是一段信息</span>-->
                    <el-table
                            border
                            :data="tableData.data"
                            style="width: 100%">
                        <el-table-column
                                align="center"
                                prop="id"
                                label="ID"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                align="center"
                                prop="nickname"
                                label="昵称"
                                >
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="order_money"
                                label="分销订单佣金"
                               >
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="order_num"
                                label="分销订单数"
                                width="180">
                        </el-table-column>
                    </el-table>
                  </span>
                </el-dialog>
            </template>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                currentTable:[],
                tableData:[],
                reject_msg:'',
                currentPage:1,
                page:1,
                limit:10,
                centerDialogVisible:false,
                id:'',
                Visible:false,
                form:{
                    name:'',
                    phone:'',
                    card:'',
                    age:''
                },
                rules:{
                    name:[
                        { required: true,message: '请输入姓名', trigger: 'blur'},
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    phone:[
                        { required: true,message: '请输入手机号', trigger: 'blur'},
                    ],
                    card:[
                        { required: true,message: '请输入身份证', trigger: 'blur'},
                    ]
                }
            }
        },
        created(){
            this.getList()


        },
        methods: {
            onSubmit(){},
            level_click(row){
                // console.log(row,'row')
                // row.show = true
                this.$set(row,'show',true)
            },
            blur_level(row){

                var this_ = this
                if(row.dis_level>5 || row.dis_level<=0){
                    this_.$message.error('请输入1-5');
                }else{
                    this_.$set(row,'show',false)
                    $.ajax({
                        url: '/admin/distributor.distributor/modify',
                        type:'POST',
                        dataType:'json',
                        data:{id:row.id,field:'dis_level',value:row.dis_level},
                        success(res){
                            console.log(res.code,'res.code')
                            if(res.code==1){
                                this_.$message({
                                    message: res.msg,
                                    type: 'success'
                                });

                            }else {
                                this_.$message.error(res.msg);
                            }
                            // console.log( res.data,'res')
                            // this_.currentTable = res.data
                        }
                    })
                }
            },
            look_b_user(id){
                var this_ = this
                this_.Visible=true
                $.ajax({
                    url: '/admin/distributor.distributor/looksub_url?id='+id,
                    methods:'get',
                    success(res){
                        if(res.code==1){

                            console.log(res.data.data,'res.data.data')
                            this_.tableData = res.data
                        }else {
                            this_.$message.error(res.msg);
                        }
                    }
                })
            },
            edit(item){
                this.id = item.id
                this.form.name = item.name
                this.form.phone = item.phone
                this.form.card = item.card
                this.form.age = item.age
                this.centerDialogVisible=true
            },
            handle_edit_info(item){
                this.$refs['form'].validate((valid) => {
                        if (valid) {
                            var this_ = this
                            $.ajax({
                                url: '/admin/distributor.distributor/edit?id='+this.id,
                                methods:'get',
                                data:this.form,
                                success(res){
                                    if(res.code==1){
                                        this_.$message({
                                            message: res.msg,
                                            type: 'success'
                                        });
                                        var item = this_.currentTable.find(d=>{return d.id === this_.id})
                                        item.name = this_.form.name
                                        item.phone = this_.form.phone
                                        item.card = this_.form.card
                                        item.age = this_.form.age
                                        this_.centerDialogVisible = false
                                    }else {
                                        this_.$message.error(res.msg);
                                    }
                                }
                            })

                        }
                })
            },
            getList(){
                var this_ = this
                $.ajax({
                    url: '{:url("admin/distributor.distributor/index")}',
                    methods:'get',
                    data:{limit:this.limit,page:this.page},
                    success(res){
                        console.log( res.data,'res')
                        var data = res.data
                        this_.currentTable = data
                    }
                })
            },
            handleSizeChange(val) {
                this.limit = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.page = val
                this.getList()
            },
            handleDangerF(item){
                console.log(item,'irem')
                var this_ = this
                this.$prompt('请输入拒绝理由', '提示', {
                    inputPattern: /\S/,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputErrorMessage: '不能为空'
                }).then(({ value }) => {
                    $.ajax({
                        url: '/admin/distributor.distributor/reject_url?id='+item.id,
                        type:'POST',
                        dataType:'json',
                        data:{reason_for_rejection:value},
                        success(res){
                            if(res.code==1){
                                this_.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            }else {
                                this_.$message.error(res.msg);
                            }
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },
            handlePrimary(item){
                var this_ = this
                this.$confirm('此操作通过申请, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url: '/admin/distributor.distributor/adopt_url',
                        type:'POST',
                        dataType:'json',
                        data:{id:item.id},
                        success(res){
                            if(res.code==1){
                                this_.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            }else {
                                this_.$message.error(res.msg);
                            }
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            handleSwitch(item){
                var this_ = this
                $.ajax({
                    url: '/admin/distributor.distributor/modify',
                    type:'POST',
                    dataType:'json',
                    data:{id:item.id,field:'status',value:item.status},
                    success(res){
                        console.log(res.code,'res.code')
                        if(res.code==1){
                            this_.$message({
                                message: res.msg,
                                type: 'success'
                            });
                        }else {
                            this_.$message.error(res.msg);
                        }
                        // console.log( res.data,'res')
                        // this_.currentTable = res.data
                    }
                })
            },

        }
    })
</script>